<template>
  <div class="container">
    <div class="app-container">
      <el-button size="small" type="primary" @click="showDialog = true; isAdd=true">添加角色</el-button>
      <el-table :data="list">
        <el-table-column prop="name" label="角色" align="center" width="200px" />
        <el-table-column prop="state" label="启用" align="center" width="200px">
          <template v-slot="{row}">
            <span>{{ row.state === 1? '已启用' :(row.state === 0? '未启用' : '无') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center" />
        <el-table-column label="操作" align="center" />
        <el-table-column>
          <template v-slot="{row}">
            <el-button type="text" size="mini">分配权限</el-button>
            <el-button type="text" size="mini" @click="getRole(row.id)">编辑</el-button>
            <el-button type="text" size="mini" @click="removeRole(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" style="60px" justify="end" align="middle">
        <el-pagination
          :total="total"
          :page-size="pageForm.pagesize"
          :current-page="pageForm.page"
          layout="prev, pager, next"
          @current-change="changePage"
        />
      </el-row>
    </div>
    <el-dialog
      :title="isAdd ? '添加角色' : '修改角色' "
      :visible.sync="showDialog"
      width="50%"
      @close="closedialog"
    >
      <el-form ref="form" label-width="120px" :model="roleForm" :rules="rules">
        <el-form-item prop="name" label="角色名称">
          <el-input v-model="roleForm.name" size="mini" />
        </el-form-item>
        <el-form-item prop="state" label="是否启用">
          <el-switch v-model="roleForm.state" />
        </el-form-item>
        <el-form-item prop="description" label="角色描述">
          <el-input v-model="roleForm.description" type="textarea" :rows="3" size="mini" />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button type="primary" size="mini" @click="addrole">确认</el-button>
            <el-button size="mini" @click="closedialog">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, addRole, getRole, updateRole, removeRole } from '@/api/role'
export default {
  name: 'Role',
  data() {
    return {
      list: [],
      showDialog: false,
      pageForm: {
        page: 1,
        pagesize: 5
      },
      total: 0,
      roleForm: {
        name: '',
        description: '',
        state: 0
      },
      rules: {
        name: [{
          required: true, message: '请输入角色名', trigger: 'blur'
        }],
        description: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      },
      isAdd: true
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    async getRolesList() {
      const { rows, total } = await getRoleList(this.pageForm)
      this.list = rows
      this.total = total
    },
    changePage(newpage) {
      this.pageForm.page = newpage
      this.getRolesList()
    },
    addrole() {
      this.$refs.form.validate(async isok => {
        if (isok) {
          if (this.isAdd) {
            await addRole(this.roleForm)
          } else {
            await updateRole(this.roleForm.id, this.roleForm)
          }
          this.getRolesList()
          this.closedialog()
        }
      })
    },
    closedialog() {
      this.roleForm = this.$options.data().roleForm
      this.$refs.form.resetFields()
      this.showDialog = false
    },
    async  getRole(id) {
      this.isAdd = false
      this.showDialog = true
      const data = await getRole(id)
      this.roleForm = data
    },
    async removeRole(id) {
      await removeRole(id)
      if (this.list.length <= 1) this.pageForm.pagesize--
      this.getRolesList()
    }
  }
}
</script>

<style scoped>
.app-container{
  padding: 20px;
}
</style>
